.darkTheme {
  --contentWidth:75%;
  --hoverBg:#ccc;
  --viewRightWidth: 300px;
  --subColor: #8a919f;
  --article-radius-size: 10px;
  --article-bg-width100: 100%;
  --article-bg-width120: 120%;
  --article-bg-height180: 180%;
  --primaryColor: #000;
  --headerHoverBg: #bbb;
  --bgColor: #fbfbfb;
  --background-primary: #fff;
  --background-secondary: #fff;
  --tabBg: #f1f3f9;
  --text-accent: #ff0099;
  --text-sub-accent: #5433ff;
  --main-gradient: linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%);
  --gradient-cover: linear-gradient(
    90deg,
    hsla(0, 0%, 98%, 0) 0,
    hsla(0, 0%, 98%, 0.013) 8.1%,
    hsla(0, 0%, 98%, 0.049) 15.5%,
    hsla(0, 0%, 98%, 0.104) 22.5%,
    hsla(0, 0%, 98%, 0.175) 29%,
    hsla(0, 0%, 98%, 0.259) 35.3%,
    hsla(0, 0%, 98%, 0.352) 41.2%,
    hsla(0, 0%, 98%, 0.45) 47.1%,
    hsla(0, 0%, 98%, 0.55) 52.9%,
    hsla(0, 0%, 98%, 0.648) 58.8%,
    hsla(0, 0%, 98%, 0.741) 64.7%,
    hsla(0, 0%, 98%, 0.825) 71%,
    hsla(0, 0%, 98%, 0.896) 77.5%,
    hsla(0, 0%, 98%, 0.951) 84.5%,
    hsla(0, 0%, 98%, 0.987) 91.9%,
    var(--background-secondary)
  );
  --article-cover: linear-gradient(
    180deg,
    hsla(0, 0%, 98%, 0) 0,
    hsla(0, 0%, 98%, 0.013) 8.1%,
    hsla(0, 0%, 98%, 0.049) 15.5%,
    hsla(0, 0%, 98%, 0.104) 22.5%,
    hsla(0, 0%, 98%, 0.175) 29%,
    hsla(0, 0%, 98%, 0.259) 35.3%,
    hsla(0, 0%, 98%, 0.352) 41.2%,
    hsla(0, 0%, 98%, 0.45) 47.1%,
    hsla(0, 0%, 98%, 0.55) 52.9%,
    hsla(0, 0%, 98%, 0.648) 58.8%,
    hsla(0, 0%, 98%, 0.741) 64.7%,
    hsla(0, 0%, 98%, 0.825) 71%,
    hsla(0, 0%, 98%, 0.896) 77.5%,
    hsla(0, 0%, 98%, 0.951) 84.5%,
    hsla(0, 0%, 98%, 0.987) 91.9%,
    var(--background-secondary)
  );
}
.lightTheme {
  --contentWidth:75%;
  --subColor: #8a919f;
  --hoverBg: #ccc;
  --article-radius-size: 10px;
  --article-bg-width100: 100%;
  --article-bg-width120: 120%;
  --article-bg-height180: 180%;
  --viewRightWidth: 300px;
  --text-accent: #ff0099;
  --text-sub-accent: #5433ff;
  --main-gradient: linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%);
  --primaryColor: #ffff;
  --headerHoverBg: #bbb;
  --color: #000;
  --bgColor: #fbfbfb;
  --background-primary: #fff;
  --background-secondary: #fff;
  --tabBg: #f1f3f9;
  --gradient-cover: linear-gradient(
    90deg,
    hsla(0, 0%, 98%, 0) 0,
    hsla(0, 0%, 98%, 0.013) 8.1%,
    hsla(0, 0%, 98%, 0.049) 15.5%,
    hsla(0, 0%, 98%, 0.104) 22.5%,
    hsla(0, 0%, 98%, 0.175) 29%,
    hsla(0, 0%, 98%, 0.259) 35.3%,
    hsla(0, 0%, 98%, 0.352) 41.2%,
    hsla(0, 0%, 98%, 0.45) 47.1%,
    hsla(0, 0%, 98%, 0.55) 52.9%,
    hsla(0, 0%, 98%, 0.648) 58.8%,
    hsla(0, 0%, 98%, 0.741) 64.7%,
    hsla(0, 0%, 98%, 0.825) 71%,
    hsla(0, 0%, 98%, 0.896) 77.5%,
    hsla(0, 0%, 98%, 0.951) 84.5%,
    hsla(0, 0%, 98%, 0.987) 91.9%,
    var(--background-secondary)
  );
  --article-cover: linear-gradient(
    180deg,
    hsla(0, 0%, 98%, 0) 0,
    hsla(0, 0%, 98%, 0.013) 8.1%,
    hsla(0, 0%, 98%, 0.049) 15.5%,
    hsla(0, 0%, 98%, 0.104) 22.5%,
    hsla(0, 0%, 98%, 0.175) 29%,
    hsla(0, 0%, 98%, 0.259) 35.3%,
    hsla(0, 0%, 98%, 0.352) 41.2%,
    hsla(0, 0%, 98%, 0.45) 47.1%,
    hsla(0, 0%, 98%, 0.55) 52.9%,
    hsla(0, 0%, 98%, 0.648) 58.8%,
    hsla(0, 0%, 98%, 0.741) 64.7%,
    hsla(0, 0%, 98%, 0.825) 71%,
    hsla(0, 0%, 98%, 0.896) 77.5%,
    hsla(0, 0%, 98%, 0.951) 84.5%,
    hsla(0, 0%, 98%, 0.987) 91.9%,
    var(--background-secondary)
  );
}
.articleListRow {
  margin-top: 15px;
  :global {
    .lbbArticleList {
      grid-template-columns: 1fr;
      .lbbArticleItem {
        display: flex;
        flex-direction: row;
        height: 200px;
        .lbbPicture {
          flex: 1;
          & > img {
            min-width: var(--article-bg-width100);
            height: 100%;
            border-radius: var(--article-radius-size);
          }
          & > span {
            width: var(--article-bg-width100);
            height: 100%;
          }
          &::after {
            width: calc(var(--article-bg-width100) + 1%);
            height: 100%;
            background: var(--gradient-cover);
          }
        }
        &:hover {
          transform: unset;
          cursor: pointer;
        }
      }
    }
  }
}
